<template>
  <div class="dashboard-container">
    <!-- 头部 -->
    <el-row>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <div class="grid-content-left a"><i>1</i></div>
          <div class="grid-content-rigth b">
            <div>上报处理次数:</div>
            <div><span>3100</span> 次</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <div class="grid-content-left a color"><i>1</i></div>
          <div class="grid-content-rigth b">
            <div>上报处理次数:</div>
            <div><span>3100</span> 次</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <div class="grid-content-left a color1"><i>1</i></div>
          <div class="grid-content-rigth b">
            <div class="number">上报处理次数:</div>
            <div><span>3100</span> 次</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- ex图 -->
    <div class="maps">
      <div ref="mapsleft" class="maps-left" />
      <div ref="mapsrigth" class="maps-rigth" />
    </div>
    <!-- 系统消息 -->
    <div class="message">
      <div>系统消息：</div>
      <div>- 2022年1月2日 13:00:00 用户上报数据 查看</div>
      <div>- 2022年1月2日 13:00:00 用户上报数据 查看</div>
      <div>- 2022年1月2日 13:00:00 用户上报数据 查看</div>
      <div>- 2022年1月2日 13:00:00 用户上报数据 查看</div>
      <div>- 2022年1月2日 13:00:00 用户上报数据 查看</div>
    </div>
  </div>
</template>

<script>
// import { UserLoginAPIs } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['token'])
  },
  // created() {
  //   // this.UserLogin()
  // },
  mounted() {
    // 竖型图
    this.bars()
    // 玫瑰图
    this.newex()
  },
  methods: {
    // 竖型图
    bars() {
      const chartDom = this.$refs.mapsleft
      const myChart = this.$echarts.init(chartDom)
      const option = {
        title: {
          text: '有害生物防治例',
          left: 100
        },
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月'
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 50, 60, 70, 50, 30],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 玫瑰图
    newex() {
      const chartDom = this.$refs.mapsrigth
      const myChart = this.$echarts.init(chartDom)
      const option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true

        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    }
    // async UserLogin() {
    //   // console.log(this.token)
    //   try {
    //     const res = await UserLoginAPIs()
    //     // console.log(res)
    //   } catch (error) {
    //     console.log(error)
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    padding: 15px 30px;
    background-color: #f3f3f3;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
// 头部样式
.el-row {
  display: flex;
  justify-content: space-around;
}
.el-col {
  height: 90px;
  background-color: #fff;
  // margin-right: 35px;
  .grid-content {
    display: flex;
    .a {
      width: 35%;
      text-align: center;
      line-height: 90px;
      background-color: #33afef;
    }
    .color {
      background-color: #ef9c36;
    }
    .color1 {
      background-color: #16a15b;
    }
    .b {
      flex: 1;
      padding: 20px 40px;
      div {
        font-size: 18px;
        font-weight: 500;
      }
      span {
        font-size: 24px;
        font-weight: 700;
      }
    }
  }
}
// ex图样式
.maps {
  margin: 15px 0;
  display: flex;
  justify-content: space-evenly;
  .maps-left {
    width: 720px;
    height: 50vh;
    background-color: #fff;
    margin-right: 20px;
  }
  .maps-rigth {
    width: 700px;
    height: 50vh;
    background-color: #fff;
    padding-bottom: 20px;
    // margin-top: 100px;
  }
}
.message {
  padding: 10px;
  background-color: #fff;
  height: 150px;
}
</style>
